<template>
    <el-button type="primary" @click="showDialog">添加用户</el-button>
    <el-button type="danger" @click="patchDel">批量删除</el-button>
    <el-table :data="userlist" style="width: 100%" @selection-change="select">
    <el-table-column type="selection" width="55" />
    <el-table-column prop="id" label="序号" width="120" />
    <el-table-column prop="loginAct" label="账号" width="150" />
    <el-table-column prop="name" label="姓名" width="150" />
    <el-table-column prop="phone" label="手机" width="150" />
    <el-table-column prop="email" label="邮箱" width="150" />
    <el-table-column prop="createTime" label="创建时间" width="200" />
    <el-table-column fixed="right" label="操作" min-width="150">
      <template #default="scoped">
        <el-button link type="primary" size="small" @click="detail(scoped.row.id)">
          详细
        </el-button>
        <el-button link type="primary" size="small" @click="edit(scoped.row.id)">编辑</el-button>
        <el-button link type="primary" size="small" @click="del(scoped.row.id)">删除</el-button>
      </template>
    </el-table-column>
  </el-table>
  <el-pagination background layout="prev, pager, next" :total="total" :page-size="pagesize" @current-change="change"/>
  
   <el-dialog v-model="dialogVisible" :title="isEdit?'编辑用户':'添加用户'" width="900" draggable :close-on-click-modal=false :close-on-press-escape=false :show-close=false :center=true>
    
    <el-form :model="form" :rules="rules" ref="formValid">
      <el-form-item label="账号" :label-width="formLabelWidth" prop="loginAct">
        <el-input v-model="form.loginAct" autocomplete="off" />
      </el-form-item>
      <el-form-item label="密码" :label-width="formLabelWidth" v-if="isEdit" >
        <el-input v-model="form.loginPwd" autocomplete="off" />
      </el-form-item>
      <el-form-item label="密码" :label-width="formLabelWidth" prop="loginPwd" v-if="!isEdit">
        <el-input v-model="form.loginPwd" autocomplete="off" />
      </el-form-item>
      <el-form-item label="姓名" :label-width="formLabelWidth" prop="name">
        <el-input v-model="form.name" autocomplete="off" />
      </el-form-item>
      <el-form-item label="手机" :label-width="formLabelWidth" prop="phone">
        <el-input v-model="form.phone" autocomplete="off" />
      </el-form-item>
      <el-form-item label="邮箱" :label-width="formLabelWidth" prop="email">
        <el-input v-model="form.email" autocomplete="off" />
      </el-form-item>
      <el-form-item label="账号未过期" :label-width="formLabelWidth" prop="accountNoExpired">
        <el-select v-model="form.accountNoExpired" placeholder="请选择">
          <el-option label="是" :value="1" />
          <el-option label="否" :value="0" />
        </el-select>
      </el-form-item>
      <el-form-item label="密码未过期" :label-width="formLabelWidth" prop="credentialsNoExpired">
        <el-select v-model="form.credentialsNoExpired" placeholder="请选择">
          <el-option label="是" :value="1" />
          <el-option label="否" :value="0" />
        </el-select>
      </el-form-item>
      <el-form-item label="账号未锁定" :label-width="formLabelWidth" prop="accountNoLocked">
        <el-select v-model="form.accountNoLocked" placeholder="请选择">
          <el-option label="是" :value="1" />
          <el-option label="否" :value="0" />
        </el-select>
      </el-form-item>
      <el-form-item label="账号是否启用" :label-width="formLabelWidth" prop="accountEnabled">
        <el-select v-model="form.accountEnabled" placeholder="请选择">
          <el-option label="是" :value="1" />
          <el-option label="否" :value="0" />
        </el-select>
      </el-form-item>
    </el-form>

    <template #footer>
      <div class="dialog-footer">
        <el-button @click="cancel">取消</el-button>
        <el-button type="primary" @click="submit(formValid)">
          提交
        </el-button>
      </div>
    </template>
  </el-dialog>


</template>
<script setup>
import { doDelete, doGet, doPost } from '@/util/axios';
import { notify } from '@/util/notification';
import { ElMessage, ElMessageBox } from 'element-plus';
import { inject, onMounted, ref } from 'vue';
import { useRouter } from 'vue-router';
const dialogVisible = ref(false)
let formValid={}
let form=ref({
  "loginAct":"",
  "loginPwd":"",
  "name":"",
  "phone":"",
  "email":"",
  "accountNoExpired":"",
  "credentialsNoExpired":"",
  "accountNoLocked":"",
  "accountEnabled":""
})
let rules={
  loginAct: [
    { required: true, message: '请输入账号', trigger: 'blur' },
    { min: 2, max: 255, message: '账号长度在2-255', trigger: 'blur' },
  ],
  loginPwd: [
    { required: true, message: '请输入密码', trigger: 'blur' },
    { min: 3, max: 16, message: '密码长度在3-16', trigger: 'blur' },
  ],
  name: [
    { required: true, message: '请输入用户名', trigger: 'blur' },
    {pattern:/^[\u4e00-\u9fa5]{2,4}$/, message: '必须为中文2-4', trigger: 'blur' },
  ],
  phone: [
    { required: true, message: '请输入手机号', trigger: 'blur' },
    { pattern:/^1(3|4|5|6|7|8|9)\d{9}$/, message: '请输入合法手机号', trigger: 'blur' },
  ],
  email: [
    { required: true, message: '请输入邮箱', trigger: 'blur' },
    { pattern:/^[^\s@]+@[^\s@]+\.[^\s@]+$/, message: '请输入合法邮箱', trigger: 'blur' },
  ],
  accountNoExpired: [
    { required: true, message: '请选择', trigger: 'blur' }
  ],
  credentialsNoExpired: [
  { required: true, message: '请选择', trigger: 'blur' }
  ],
  accountNoLocked: [
  { required: true, message: '请选择', trigger: 'blur' }
  ],
  accountEnabled: [
  { required: true, message: '请选择', trigger: 'blur' }
  ]
}
let router=useRouter()
let current=ref(1)
const pagesize=10
let userlist=ref([])
let total=ref(0)
let flash=inject("reflash")
let isEdit=ref(false)
let delArray=[]
function patchDel(){
  ElMessageBox.confirm(
    '是否删除数据?',
    'Warning',
    {
      confirmButtonText: '确定',
      cancelButtonText: '取消',
      type: 'warning',
    }
  )
    .then(() => {
      doPost("/deletePatch",{"array":delArray}).then(res=>{
        if(res.data.code==200){
              ElMessage({
            type: 'success',
            message: '删除成功',
          })
          flash()
        }else{
          ElMessage({
            type: 'error',
            message: '删除失败',
          })
        }
      })
    })
    .catch(() => {
      ElMessage({
        type: 'info',
        message: '取消删除',
      })
    })
}
function select(value){
  delArray=[]
  for(let i=0;i<value.length;i++){
  delArray.push(value[i].id)
  }
}
function cancel(){
  dialogVisible.value=false
  form.value={}
}
function submit(formValid){
  if (!formValid) return
    formValid.validate((valid, fields) => {
    if (valid) {
      if(!isEdit){
        doPost("/addUser",form.value).then(res=>{
        console.log(res)
        if(res.data.code==200){
          notify("添加成功","success")
          flash()
          dialogVisible.value=false
          form.value={}
        }else{
          notify("添加失败","error")
        }
      })
      }else{
        doPost("/editUser",form.value).then(res=>{
          if(res.data.code==200){
            notify("修改成功","success")
            flash()
            dialogVisible.value=false
            form.value={}
            isEdit.value=false

          }else{
            notify("修改失败","error")
          }
        })
      }
    
    } else {
      console.log('error submit!', fields)
    }
  })
}

function showDialog(){
  dialogVisible.value=true
}
function detail(id){
    router.push("/dashbord/Userdetail/"+id)
    console.log(id)
}
function edit(id){
 
  doGet("/getUser",{"id":id}).then(res=>{
    console.log(res)
    if(res.data.code==200){
      form.value=res.data.data
      form.value['loginPwd']=""
      form.value['id']=id
      isEdit.value=true
      showDialog()
    }
    
  })
    
}
function del(id){
    console.log(id)
    ElMessageBox.confirm(
    '是否删除该数据?',
    'Warning',
    {
      confirmButtonText: '确定',
      cancelButtonText: '取消',
      type: 'warning',
    }
  )
    .then(() => {
      doDelete("/deleteUser",{"id":id}).then(res=>{
        if(res.data.code==200){
              ElMessage({
            type: 'success',
            message: '删除成功',
          })
          flash()
        }else{
          ElMessage({
            type: 'error',
            message: '删除失败',
          })
        }
      })
    })
    .catch(() => {
      ElMessage({
        type: 'info',
        message: '取消删除',
      })
    })
}
function change(num){
    console.log(num)
    getList(num)
}
function getList(num){
    doGet("/UserList",{
        'current':num,
        'pagesize':pagesize
    }).then(res=>{
        
        userlist.value=res.data.data.list
        console.log(userlist.value)
        current.value=res.data.data.pageNum
        total.value=res.data.data.total
    })
}
onMounted(()=>{
   getList(current.value)
})
</script>
<style scoped></style>